<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          type="text/css"/>

    <script src="../../jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"
            type="text/javascript"></script>
    <script src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"
            type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#reminderTime").click(function () {
                if (this.checked) {
                    $("#reminderTimeDiv").show("200");
                } else {
                    $("#reminderTimeDiv").hide("200");
                }
            });
        });
    </script>
</head>
<body>

<!-- 查找联系人 -->
<div class="modal fade" id="findContacts" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找联系人</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input class="form-control" placeholder="请输入联系人名称，支持模糊查询" style="width: 300px;" type="text">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table class="table table-hover" id="activityTable" style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>邮箱</td>
                        <td>手机</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input name="activity" type="radio"/></td>
                        <td>李四</td>
                        <td>lisi@bjpowernode.com</td>
                        <td>12345678901</td>
                    </tr>
                    <tr>
                        <td><input name="activity" type="radio"/></td>
                        <td>李四</td>
                        <td>lisi@bjpowernode.com</td>
                        <td>12345678901</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div style="position:  relative; left: 30px;">
    <h3>创建任务</h3>
    <div style="position: relative; top: -40px; left: 70%;">
        <button class="btn btn-primary" type="button">保存</button>
        <button class="btn btn-default" type="button">取消</button>
    </div>
    <hr style="position: relative; top: -40px;">
</div>
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-taskOwner">所有者<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-taskOwner">
                <option></option>
                <option selected>zhangsan</option>
                <option>lisi</option>
                <option>wangwu</option>
            </select>
        </div>
        <label class="col-sm-2 control-label" for="create-subject">主题<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-subject" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-expiryDate">到期日期</label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-expiryDate" type="text">
        </div>
        <label class="col-sm-2 control-label" for="create-contacts">联系人&nbsp;&nbsp;<a data-target="#findContacts"
                                                                                      data-toggle="modal"
                                                                                      href="javascript:void(0);"><span
                class="glyphicon glyphicon-search"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-contacts" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-state">状态</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-state">
                <option></option>
                <option>未启动</option>
                <option>推迟</option>
                <option>进行中</option>
                <option>完成</option>
                <option>等待某人</option>
            </select>
        </div>
        <label class="col-sm-2 control-label" for="create-priority">优先级</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-priority">
                <option></option>
                <option>高</option>
                <option>最高</option>
                <option>低</option>
                <option>最低</option>
                <option>常规</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-describe">描述</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" id="create-describe" rows="3"></textarea>
        </div>
    </div>

    <div style="position: relative; left: 103px;">
        <span><b>提醒时间</b></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="reminderTime" type="checkbox">
    </div>

    <div id="reminderTimeDiv"
         style="width: 500px; height: 180px; background-color: #EEEEEE; position: relative; left: 185px; top: 20px; display: none;">
        <div class="form-group" style="position: relative; top: 10px;">
            <label class="col-sm-2 control-label" for="create-startTime">开始日期</label>
            <div class="col-sm-10" style="width: 300px;">
                <input class="form-control" id="create-startTime" type="text">
            </div>
        </div>

        <div class="form-group" style="position: relative; top: 15px;">
            <label class="col-sm-2 control-label" for="create-repeatType">重复类型</label>
            <div class="col-sm-10" style="width: 300px;">
                <select class="form-control" id="create-repeatType">
                    <option></option>
                    <option>每天</option>
                    <option>每周</option>
                    <option>每月</option>
                    <option>每年</option>
                </select>
            </div>
        </div>

        <div class="form-group" style="position: relative; top: 20px;">
            <label class="col-sm-2 control-label" for="create-noticeType">通知类型</label>
            <div class="col-sm-10" style="width: 300px;">
                <select class="form-control" id="create-noticeType">
                    <option></option>
                    <option>邮箱</option>
                    <option>弹窗</option>
                </select>
            </div>
        </div>
    </div>
</form>

<div style="height: 200px;"></div>
</body>
</html>